<template>
	<div class="module-item-goods" :style="!JSON.parse(module.base.m) ? 'margin-top:0' : ''">
		<div class="item-goods-con" :style="style">
			<moduleBg :base="module.base" />
			<moduleTwtit :title="module.title" v-if="JSON.parse(module.title.s)" />
			<div :class="itemGoodsStyle" >
					<div class="item" v-for="(item, index) in module.list" :key="index" @click="$util.openAttr(module.list,index)">
						<div class="pic">
							<img :src="item.cm.logo + '?x-oss-process=style/a2'" alt="" />
							<template v-if="item.tag && JSON.parse(item.tag)">
								<span >{{item.tagtxt}}</span>
							</template>
						</div>
						<div class="c">
							<div class="tit" :style="titStyle" v-if="JSON.parse(module.base.t.s)"><moduleText :text="module.base.t" :name="item.cm.title" /></div>
							<div class="price" :style="priceStyle" v-if="JSON.parse(module.base.sjg) || JSON.parse(module.base.sgm)">
								<template v-if="JSON.parse(module.base.sjg)">
								<span v-if="item.cm.type == '1'">
									<b>￥{{ item.cm.discount_price }}</b>
									<i v-if="item.cm.market_price">￥{{ item.cm.market_price }}</i>
								</span>
								<span v-if="item.cm.type == '2'">
									<b>{{ item.cm.price_describe }}</b>
								</span>
								</template>
								<template v-if="JSON.parse(module.base.sgm)">
									<label v-if="item.cm.type == '1' ">立即购买</label>	
									<!-- && item.cm.stock > 0 -->
									<label v-if="item.cm.type == '2'">立即领取</label>
									<!-- <label v-else-if="!$util.checkStart(item.cm.startTime)">预约提醒</label> -->
									<!-- <label v-if="item.cm.stock <= 0" style="background:#aaa">已抢完</label> -->
								</template>
							</div>
							<template v-if="JSON.parse(module.base.sjs)">
								<p class="ju" v-if="$util.checkStart(item.cm.start_time)">距离活动结束:{{ showtime(item.cm) }}</p>
								<p class="ju" v-else>距离活动开始：{{ showtime(item.cm) }}</p>
							</template>
						</div>
					</div>
				<div class="noadd" v-if="module.list.length == 0"><el-button type="primary" size="mini" icon="el-icon-plus" @click="addGoods">添加商品</el-button></div>
			</div>

		</div>

		<!--添加商品弹窗-->
		<transition name="mask"><div class="comm-mask" v-if="showSelectGoods"></div></transition>
		<transition name="scale"><SelectGoods v-if="showSelectGoods" /></transition>
	</div>
</template>

<script>
import moduleBg from '@/views/module/bg.vue';
import moduleText from '@/views/module/text.vue';
import SelectGoods from '@/views/attr/selectGoods.vue';
export default {
	props: ['module'],
	components: { moduleBg, moduleText,SelectGoods },
	data() {
		return {
			 showSelectGoods:false,
		};
	},

	computed: {
		style() {
			if (this.module.base.fc != '') {
				return `color:${this.module.base.fc}`;
			}
		},
		titStyle(){
			if (this.module.title.ta && this.module.title.ta != '') {
				return `text-align:${this.module.title.ta}`;
			}
		},
		priceStyle(){
			if (this.module.base.t.ta && this.module.base.t.ta != '') {
				return `text-align:${this.module.base.t.ta}`;
			}
		},
		itemGoodsStyle(){
			let className="item-goods-style1";
			if(this.module.base.s==0){
				className += "";
			}else if(this.module.base.s==1){
				className += " style2";
			}else if(this.module.base.s==2){
				className += " style3";
			}
			return className;
		}
		
	},

	mounted() {},
	methods: {
		showtime(item) {
			let time = this.$util.getDownTime(item.start_time, item.end_time);
			if (time <= 0) {
				return '活动已结束';
			}
			let re = this.$util.timeformat(time);
			return `${re.day}天${re.hour}时${re.minute}分${re.second}秒`;
		},	
		
		addGoods(){
			if(!this.$parent.prev){	this.showSelectGoods = true; }
		}
		
	}
};
</script>

<style scoped>
.item-goods-style1.style3 .item{
	display: flex;
}
.item-goods-style1.style3 .item .pic{
	width: 150px;
}
.item-goods-style1.style3 .item .c{
	display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow: hidden;
    position: relative;
    padding-left: 11px;
}
</style>
